<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑资料</title>
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <link rel="stylesheet" href="/static/app/css/core.css">
    <script src="/static/layer/layer.min.js"></script>

    <style>
        .add{
            width: 64%;
            height: 0.4rem;
            margin-left: 0.6rem;
            background:transparent;
            border:none;
            outline:medium;
        }
        .lad{
            margin-left: 0.6rem;
            color: #000;
            font-size: 0.25rem;
        }
        .info-links{
            margin-top: 0.05rem;
        }
        .button_lar{
            width: 90%;
            height: 0.7rem;
            margin-left: 5%;
            margin-top: 2rem;
            color: #fff;
            font-size: 0.3rem;
            border: 0;
            border-radius:0.1rem;
            background-color: #0b76ac;
            outline:none;
        }
        .gdf{
            margin-left: 0.2rem;
            font-size: 0.3rem;
        }
        .dall{
            font-size: 0.1rem;
            float: right;
        }
        .info-links label {
            display: block;
            height: 1.06rem;
            line-height: 1.06rem;
            border-bottom: 1px solid #f1f1f1;
            font-size: .34rem;
        }

        label {
            text-decoration: none;
            color: #666;
        }
    </style>
</head>
<body>
<div class="header">
    <div><a href="javascript:history.back(-1)"><img src="/static/app/img/fanh.png"></a></div>
    <div>设备续费</div>
    <div></div>
    <!--<div><a href="javascript:;" class="head-btn iconfont">&#xe765;</a></div>-->
</div>
<div class="center">
    {include file='public:head_img'}
    <form id="form" form="submit">
        {foreach name="list" key="key" item="v"}
    <div class="info-links">
        <a href="javascript:;">
            <input type="radio" name="equ_id"   {if $key=="0"}checked="checked"{/if}value="{$v.id}" >IMEI:<span class="gdf">{$v.name}</span><span class="dall">({if $v.expire_time<=time()}已过期{else}{$v.expire_time|date='Y-m-d',###}到期{/if})</span>
        </a>
    </div>
        {/foreach}
    <!--<div class="info-links">-->
        <!--<a href="javascript:;"><input type="radio" name="sex" value="IMEI:" >IMEI:<span class="gdf">22325262626</span><span class="dall">(2019-05-11到期)</span> </a>-->
    <!--</div>-->
    <div class="info-links">
        <div class="login-container">
        <label>点卡号
            <input type="text" class="add" required="ture"  name="card_name" value="" placeholder="请输入点卡号">
        </label>
        </div>
        <label for="user-name">点卡密码
            <input type="text" class="add" required="ture"  name="card_pass" value="" placeholder="请输入点卡密码" >
        </label>

            <button type="button" onclick="roleSubmit()" class="button_lar" >确定支付</button>

    </div>
    </form>

</div>
{include file='public:bottom'}
</body>
<!--{include file='public:validation'}-->
<script>
    //提交
    function roleSubmit(){
        var form=document.getElementById("form");
        var formData=new FormData(form);

        $.ajax({
            url:"{:Url('rechargeData')}",
            type:'POST',
            data:formData,
            async: false,
            cache: false,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success:function(res){
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                layer.msg(res.msg, {shade: 0.5, time: 800, icon: 1}, function(){
                    window.location.href="{:url('index')}";
                });
            }
        });
    }

    /**
     * [btnCheck 按钮倒计时常用于获取手机短信验证码]
     */
    function btnCheck(t) {
        // $t=$(t).prop("outerHTML");
        // console.log($t);
        $mobile = $('[name="mobile"]').val();
        if ($mobile.length ==11){
            $.ajax({
                type : 'post',
                url : "{:url('vercod')}",
                data : {
                    'mobile':$mobile
                },
                success : function(res){
                    if (res.code != 200) {
                        layer.msg(res.msg,{shade: 0.5, time: 2000, icon: 2});
                        return false;
                    }
                    layer.msg(res.msg, {shade: 0.5, time: 2000, icon: 1}, function(){
                        // $(this).addClass("on");
                        var time = 60;
                        $(t).hide();
                        $('.yfs').show();

                        var timer = setInterval(function() {
                            if (time == 0) {
                                clearInterval(timer);
                                $('.yfs').hide();
                                $(t).show();
                            } else {
                                $('.yfs').text(time+"秒");
                                time--;
                            }
                        }, 1000);
                    });

                }
            })
        }else{
            layer.msg('请输入11位手机号',{shade: 0.5, time: 2000, icon: 2});
        }

    }
</script>
</html>